<template>
  <div class="particulars">
    <!-- <van-nav-bar title="标题" /> -->
    <!--  -->
    <div class="a">
      <h1>周处处三害</h1>
    </div>
    <div class="b" @click="$router.back()">
      <img src="../../assets/下载.png" class="imgs" alt="" />
    </div>
    <div class="c">
      <div class="c1">
        <img src="../../assets/QQ截图20240316095650.jpg" alt="" />
      </div>
      <div class="c2">
        <div class="c2a">
          <ul>
            <h1>周处除三害</h1>
            <div class="c2a1">
              <span class="aaa">2D</span>
            </div>
          </ul>
          <p>动作 | 犯罪</p>
          <p>2024-03-01上映</p>
          <p>中国台湾|134分钟</p>
        </div>
        <div class="c2b">
          <h1>7.1分</h1>
        </div>
      </div>
      <div class="c3">
        <p>
          通缉犯陈桂林生命将尽，却发现自己在通缉榜上只排名第
          三，他决心查出前两名通缉犯的下落，并将他们一一除掉
          陈桂林以为自己已成为当代的周处除三害，却没想到永远参
          不透的贪嗔痴，才是人生终要面对的罪与罚。电影引用的
          “周处除三害”典故，见于《晋书·周处传》和《世说新
          语》。据记载，少年周处身形魁梧，武力高强，却横行乡
          里，为邻人所厌。后周处只身斩杀猛虎孽蛟，他自己也浪子 回头、改邪归正，至此三害皆除。
        </p>
        <div class="c3a">
          <van-icon name="arrow-up" />
        </div>
      </div>
    </div>
    <div class="d">
      <div class="d1">
        <h1>演职人员</h1>
      </div>
      <div class="d2-box">
        <div class="d2" v-for="item in 9" :key="item">
          <div class="d2aa">
            <div class="d2a">
              <img src="../../assets/QQ截图20240316095650.jpg" alt="" />
            </div>
            <p style="color: #000; padding-top: 5px">杨颖</p>
            <p>主演</p>
          </div>
        </div>
      </div>
    </div>
    <div class="e">
      <div class="e1">
        <p>剧照</p>
        <p>全部(5)></p>
      </div>
      <div class="e2">
        <img
          src="../../assets/QQ截图20240316095650.jpg"
          alt=""
          class="e2a"
          style="margin-right: 10px"
          v-for="item in 9"
          :key="item"
        />
      </div>
    </div>
    <van-button type="warning" class="f" color="#ff5f16">选座购票</van-button>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.imgs {
  width: 30px;
  position: fixed;
  top: 10px;
}
.aaa {
  font-size: 13px;
  color: #fff;
}
.a {
  width: 100%;
  height: 44px;
  display: none;
  position: absolute;
  top: 0px;
}
.a h1 {
  text-align: center;
  font-size: 17px;
  line-height: 44px;
}
.b {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff7a;
  border: none;
  position: absolute;
  top: 6px;
  left: 10px;
}
.c {
  width: 100%;
  border-bottom: 15px solid #f4f4f4;
}
.particulars {
  width: 100vw;

  position: relative;
}
.c1 {
  width: 100%;
  height: 210px;
  border-radius: 4px;
}
.c1 img {
  width: 100%;
  height: 100%;
}
.c2 {
  width: 349px;
  height: 90px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.c2a p {
  color: #898d91;
  font-size: 13px;
  margin-top: 10px;
}
.c2a1 {
  width: 21px;
  height: 15px;
  background: #cbd0d7;
  border-radius: 2px;
  margin-left: 10px;
  margin-top: 1px;
  text-align: center;
  line-height: 15px;
}
.c2a ul {
  display: flex;
}
.c2a1 h2 {
  color: #fff;
  font-size: 15px;
  margin-top: 1px;
}
.c2b h1 {
  font-size: 20px;
  color: #ffae28;
}
.c3 {
  width: 349px;
  height: 238px;
  margin: auto;
}
.c3 p {
  color: #797d82;
  line-height: 1.5;
  font-size: 15px;
  margin-top: 15px;
}
.c3a {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: center;
}
.d,
.e {
  width: 100%;
  height: 195px;
  border-bottom: 15px solid #f4f4f4;
}
.d1 {
  height: 27%;
  margin-left: 15px;
  display: flex;
  align-items: center;
}
.d2-box {
  width: 100%;
  height: 140px;
  padding-left: 20px;
  box-sizing: border-box;
  overflow: auto;
  font-size: 0;
  white-space: nowrap;
}
.d2 {
  height: 73%;
  display: inline-block;
  margin-right: 10px;
}
.d2-box::-webkit-scrollbar {
  display: none;
}
.d2a {
  width: 87px;
  height: 87px;
  margin-right: 10px;
}
.d2a img {
  width: 85px;
  height: 85px;
}
.d2aa {
  width: 87px;
}
.d2aa h1,
.d2aa p {
  text-align: center;
}
ul {
  width: 120px;
  margin-bottom: 10px;
}
.d2aa h1 {
  margin-top: 10px;
}
.d2aa p {
  margin-top: 3px;
  font-size: 13px;
  color: #797d82;
}
.e {
  border-bottom: 60px solid #f4f4f4;
}
.f {
  width: 100%;
  position: fixed;
  bottom: 0px;
}
.e1 {
  height: 55px;
  display: flex;
  justify-content: space-between;
}
.e1 p {
  line-height: 55px;
  margin-left: 15px;
}
.e1 p:nth-of-type(2) {
  color: #797d82;
  font-size: 13px;
  margin-right: 30px;
}
.e2 {
  margin-left: 15px;
  height: 120px;
  overflow: auto;
  font-size: 0;
  white-space: nowrap;
}
.e2a {
  width: 150px;
  height: 100px;
  display: inline-block;
}
.e2::-webkit-scrollbar {
  display: none;
}
</style>
